import React from 'react';
import { Flex } from 'antd-mobile'
import Nav from './components/Nav';
import ItemCard from './components/ItemCard';
import AddCard from './components/AddCard';
import { connect } from 'react-redux';

import 'common/common';

class App extends React.Component {
  constructor(props) {
    super(props);
    // 检测是否支持 service worker
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./sw.js').then(reg => {
        console.info('service worker registed!');
      });
    } else {
      console.wran('不支持的浏览器');
    }
  }

  render() {
    const items = this.props.items;
    return <div>
      <Nav/>
      <Flex>
        <Flex.Item direction="column">
          <AddCard/>
          {items && items.map(item => <ItemCard {...item} key={item.id}>
          </ItemCard>)}
        </Flex.Item>
      </Flex>
    </div>
  }
};



const mapStateToProps = state => {
  return {
    date: state.date,
    items: state.list,
  }
};

export default connect(
  mapStateToProps,
)(App);
